import React from 'react';
import { Link } from 'react-router';

import commemtImg from '../images/comment_box.png';
import tagImg from '../images/blue_label.png';
import { hashHistory } from 'react-router';
const styles = {
    articleImg: {
        width: "calc( 100% - 0.6rem )",
        height: "10rem",
        position: "relative",
        backgroundSize: "100% auto",
        backgroundRepeat: "no-repeat",
        margin: "0 0.3rem"
    },
    articleSummary: {
        height: "2.4rem",
        wordBreak: "break-all",
        position: "absolute",
        overflow: "hidden",
        fontSize: "0.8rem",
        width: "calc(100% - 4.5rem)",
        left: "3.5rem",
        color: "rgb(163,163,163)",
        lineHeight: "1.2rem"
    },
    articleComment: {
        width: "1.5rem",
        height: "1.5rem",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% auto",
        position: "absolute",
        fontSize: "0.8rem",
        color: "#fff",
        textAlign: "center"
    },
    articleTag: {
        color: "#fff",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% auto",
        position: "absolute",
        height: "3rem",
        width: "5rem",
        left: "0.3rem",
        fontSize: "0.8rem",
        paddingLeft: "0.8rem"
    }
}

export default class Articles extends React.Component {
	constructor(props) {
    super(props);
    this.onClickArticle = this.onClickArticle.bind(this);
}

    componentDidMount() {
        let height = 0;
        let width = 0;
        let _this = this;
        if (this.props.articles && this.props.articles.length > 0) {
            this.props.articles.forEach(function (item) {
                let tagNode = document.getElementById("article/" + item.ID);
                height = tagNode.offsetHeight;
                width = tagNode.offsetWidth;
                let fontSize = (width / (( height * 0.75 ) / 2 )) * 4;
                let text = _this.cutString(tagNode.innerHTML, fontSize) ;
                if (text.length > 0)
                    tagNode.innerHTML = text + '...';
                else 
                    tagNode.innerHTML = text;
            });
        }
        
        $(".articleRow").on('click',function(){
        	var href = $(this).data("href");
        	hashHistory.push(href);
        	console.log(href);
        	var leftMenu = $("#leftBar");
	    	var body = $("body");
	    	var sidebar = $(".sidebar");
        	sidebar.removeClass("fa-arrow-left").addClass("fa-arrow-right");
    		leftMenu.animate({left:'-9.3rem'});
            body.css({"position":'relative'}).animate({left:'0'});
            setTimeout(function(){
            	leftMenu.hide();
            },400);
        });
    }

    cutString(obj, maxLen) {
        var b = 0;
        var l = obj.length;
        let ret = obj;
        if (l) {
            for (var i = 0; i < l; i++) {
                if (obj.charCodeAt(i) > 255) {
                    b += 2;
                } else {
                    b++;
                }
                if (b > maxLen) {
                    ret = obj.substring(0, i);
                    return ret;
                }  
            };
            return ret;
        } else {
            return obj;
        }
    }
    
    onClickArticle(linkTo){
    	hashHistory.push(linkTo)
    }

    render() {
        var articles = [];
        let count = 0;
        this.props.articles.map(function (article) {
            var featuredImage = "url(" + article.FeaturedImage + ")";
            var linkTo = "article/" + article.ID;
            let backgroundImage = "url(" + commemtImg + ")";
            let tagBackgroundImg = "url(" + tagImg + ")";
            let commentNum = article.NumberOfComments;
            if (article.NumberOfComments > 99) {
                commentNum = "99+"
            }
            if (article.IsCommentAllowed == false ) {
                commentNum = '--';
            }
            //onClick={() => { hashHistory.push(linkTo)} }
            articles.push(
                <div className="articleRow" data-href={linkTo} key={count++}>
                    <div className="article-item">
                        <div className="article-body">
                            <div className="article-header">
                                <span style={{...styles.articleTag, backgroundImage: tagBackgroundImg}}>
                                    {article.ChannelName}
                                </span>
                                <span style={{ color: "#000", float: "right" ,fontSize:"0.9rem"}}>
                                    {article.PublishedDateString}
                                </span>
                            </div>
                            {article.FeaturedImage && <div style={{...styles.articleImg, backgroundImage: featuredImage }}/>}
                            <div className="article-title">
                                {article.Title}
                            </div>
                            <div className="article-summary">
                                <div style={{...styles.articleComment, backgroundImage: backgroundImage}}>{commentNum}</div>
                                <span id={linkTo}
                                    style={styles.articleSummary}>
                                    { article.BodySummary }
                                </span>
                            </div>
                        </div>
                    </div >
                </div >
            );
        });

        return (
            <div className="articles">
                {articles}
            </div>
        );
    }
}